<template>
  <div>
    <div class="white_box">
      <div class="chapter_tit">章节标题：{{ info.name }}</div>
      <div class="video_box">
        <video :src="info.video" controls @error="handleVideoError"></video>
        <!-- <img src="@/assets/images/function/transparent_pause_icon.png" alt="" class="video_img" /> -->
        <!-- <img src="@/assets/images/function/transparent_play_icon.png" alt="" class="video_img" /> -->
      </div>
      <div class="chapter_info">
        <div class="item_info dis_flex just_cont_spa_bet">
          <div>本章节是否学习：</div>
          <div class="dis_flex">
            <img src="" alt="" />
            <div>{{ info.is_learning == 1 ? "已学习" : "未学习" }}</div>
          </div>
        </div>
        <div class="item_info dis_flex just_cont_spa_bet">
          <div>课程作者：</div>
          <div>{{ info.editor }}</div>
        </div>
        <div>
          <div class="item_info desc_tit">课程简介：</div>
          <div class="course_desc">
            {{ info.introduce }}
          </div>
        </div>
      </div>
    </div>

    <div>
      <div class="head_label dis_flex">
        <img src="@/assets/images/common/bar.png" alt="" class="label_img" />
        <div class="label_txt">章节测试任务</div>
      </div>
      <div class="white_box dis_flex">
        <img :src="info.rating_scale_cover" alt="" class="test_img" />
        <div class="test_info dis_flex just_cont_spa_bet">
          <div>
            <div class="test_tit">{{ info.rating_scale_name }}</div>
            <div class="dis_flex">
              <img
                src="@/assets/images/function/ye_unfinished_icon.png"
                alt=""
                class="state_img"
              />
              <div class="state_txt">
                {{ info.result_id > 0 ? "章节测评已完成" : "章节测评未完成" }}
              </div>
            </div>
          </div>
          <div class="evaluation_btn" @click="toEvaluation">
            {{ info.result_id > 0 ? "已测评" : "开始测评" }}
          </div>
        </div>
      </div>
    </div>

    <div>
      <div class="head_label dis_flex">
        <img src="@/assets/images/common/bar.png" alt="" class="label_img" />
        <div class="label_txt">添加学习心得：</div>
      </div>
      <textarea
        name=""
        id=""
        cols="30"
        rows="10"
        placeholder="请输入问题描述。"
        v-model="learning"
      ></textarea>
    </div>
    <div class="save_btn" @click="toSave">保存心得并标为已学习</div>
  </div>
</template>

<script>
import { saveLearning } from "@/api/funcation/psychologySchool";

export default {
  props: {
    info: {
      type: Object,
      default: () => {},
    },
  },
  data() {
    return {
      learning: "",
    };
  },
  created() {
    "";
  },
  methods: {
    handleVideoError() {
      this.$toast.fail("视频加载失败，请检查视频链接");
    },
    async toSave() {
      if (!this.learning) {
        this.$toast.fail("请输入学习心得");
        return;
      }
      let par = {
        course_id: this.info.course_id,
        chapter_id: this.info.id,
        learning: this.learning,
      };
      let res = await saveLearning(par);
      if (res.code == 200) {
        this.$toast.success("保存成功");
        this.$router.go(-1);
      }
    },
    toEvaluation() {
      this.$router.push(
        `/normalAnswer?id=${this.info.id}&type=psychologicalSchool`
      );
    },
  },
};
</script>

<style lang="less" scoped>
.white_box {
  background: #ffffff;
  border-radius: 6.67px;
  padding: 16px 10px;
}

.dis_flex {
  display: flex;
  align-items: center;
}

.just_cont_spa_bet {
  justify-content: space-between;
}

.chapter_tit {
  color: #333333;
  line-height: 21.33px;
  font-size: 16.67px;
}

.video_box {
  position: relative;
  width: 100%;
  height: 180px;
  margin-top: 16px;

  video {
    width: 100%;
    height: 180px;
  }
}

.video_img {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 43.33px;
  height: 43.33px;
}

.chapter_info {
  color: #666666;
  font-size: 14.67px;
}

.item_info {
  height: 46.67px;
  line-height: 46.67px;
  border-bottom: 0.33px solid rgba(85, 85, 85, 0.2);
}

.desc_tit {
  border: 0;
}

.course_desc {
  color: #333333;
  line-height: 28px;
  font-size: 14.67px;
}

.head_label {
  margin: 19px 0;
}

.label_img {
  width: 5.33px;
  height: 15.33px;
  margin-right: 11.33px;
}

.label_txt {
  font-weight: bold;
  font-size: 14.67px;
  line-height: 14.67px;
}

.test_img {
  width: 40px;
  height: 40.67px;
  margin-right: 9.33px;
}

.test_info {
  flex: 1;
}

.test_tit {
  color: #333333;
  font-size: 14.67px;
  margin-bottom: 7px;
}

.state_img {
  width: 15.33px;
  height: 15.33px;
  line-height: 15.33px;
  margin-right: 6.33px;
}

.state_txt {
  color: #000000;
  line-height: 12px;
  opacity: 0.5;
  font-size: 12px;
}

.evaluation_btn {
  width: 80px;
  height: 33.33px;
  line-height: 33.33px;
  font-size: 12.67px;
  text-align: center;
  background: linear-gradient(0deg, #ffffff -20%, rgba(255, 255, 255, 0) 20%),
    #0aa7f4;
  border-radius: 6.67px;
  color: #fff;
}

textarea {
  width: 100%;
  height: 209.67px;
  background: #ffffff;
  border-radius: 6.67px;
  padding: 16px 10px;
  color: #999999;
  font-size: 14.67px;
  border: 0;
  box-sizing: border-box;
}

.save_btn {
  width: 333.33px;
  height: 46.67px;
  line-height: 46.67px;
  text-align: center;
  background: linear-gradient(0deg, #ffffff -20%, rgba(255, 255, 255, 0) 20%),
    #00aeff;
  border-radius: 6.67px;
  color: #ffffff;
  font-size: 15.33px;
  margin: 33px auto;
}
</style>
